<template>
    <div>
        <van-tabs v-model="activeName">
            <van-tab title="添加" name="a">
                <van-field v-model="form.name" label="名称" placeholder="请输入名称" />
                <van-field v-model="form.price" label="价格" placeholder="请输入价格" />
                <van-button round type="info" @click="add">圆形按钮</van-button>
            </van-tab>
            <van-tab title="展示" name="b">
                展示页面
                <table>
                    <tr>
                        <td>商品名称</td>
                        <td>商品价格</td>
                        <td>操作</td>
                    </tr>
                    <tr v-for="i in shop">
                        <td>{{i.name}}</td>
                        <td>{{i.price}}</td>
                        <td>
                            <van-button color="linear-gradient(to right, #000000, #ffffff)" @click="del(i.id)">
                                删除 
                            </van-button>
                        </td>
                    </tr>
                </table>
            </van-tab>
        </van-tabs>

      
    </div>
</template>

<script>
    export default {
        data(){
            return{
                form:{},
                shop:{},
                activeName: 'b',
            }
        },
        methods:{
            add:function () {
                this.$axios.post('shop/',this.form)
                .then(res=>{
                    if(res.data.code==200){
                        this.$toast.fail('添加成功')
                    }
                })
            },

            //展示
            show_shop(){
                this.$axios.get('shop/')
                .then(res=>{
                    this.shop=res.data.list
                })
            },



            // 删除
            del(id){
                 this.$axios.delete('shop/?id='+id)
                .then(res=>{
                    this.$toast.fail('删除成功')
                    this.show_shop
                })
            },
        },
        mounted(){
            this.show_shop()
        },
    }
</script>

<style scoped>

</style>